<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      position: absolute;
    }

    @-webkit-keyframes text-dot {
      0% {
        width: 0;
        margin-right: 1.5em;
      }

      33% {
        width: 0.5em;
        margin-right: 1em;
      }

      66% {
        width: 1em;
        margin-right: 0.5em;
      }

      100% {
        width: 1.5em;
        margin-right: 0;
      }
    }

    @keyframes text-dot {
      0% {
        width: 0;
        margin-right: 1.5em;
      }

      33% {
        width: 0.5em;
        margin-right: 1em;
      }

      66% {
        width: 1em;
        margin-right: 0.5em;
      }

      100% {
        width: 1.5em;
        margin-right: 0;
      }
    }

    .loading-dot {
      overflow: hidden;
      font-family: simsun;
      animation: text-dot 1s infinite step-start;
      -webkit-animation: text-dot 1s infinite step-start;
    }

    .loading-view {
      background-color: #eeeeee;
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 200;
      display: flex;
    }

    .loading-container {
      margin: auto;
      display: flex;
    }
  </style>
  <script id="preload">
    (() => {
      window.__BUILD_ENV__ = "<%= BUILD_ENV %>";

    })()

    window.appendEle = (dom, isBody) => {
      if (isBody) {
        document.body.appendChild(dom);
        return
      }
      document.head.appendChild(dom);
    };

    const callback = async () => {
      const jq = document.createElement("script");
      jq.type = "text/javascript";
      jq.src = "/static/js/jquery.min.js";
      window.appendEle(jq);

      const preload = document.getElementById("preload");
      preload.remove();
    }
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", callback);
    } else {
      callback();
    }

  </script>
</head>

<body>
  <div class="loading-view" id="loadingView">
    <div class="loading-container">
      <span class="loading-text" id="loadingViewTitle">资源加载中</span>
      <div class="loading-dot">...</div>
    </div>
  </div>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>